import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { BookOpen, Home, Code } from 'lucide-react';
import HomePage from './pages/HomePage';
import DocumentationCenter from './pages/DocumentationCenter';
import MermaidEditor from './components/MermaidEditor';
import './App.css';

const Navigation = () => {
  const location = useLocation();

  const navItems = [
    { path: '/', label: '首页', icon: Home },
    { path: '/editor', label: '编辑器', icon: Code },
    { path: '/docs', label: '文档中心', icon: BookOpen },
  ];

  const isActive = (path) => {
    if (path === '/') return location.pathname === '/';
    return location.pathname.startsWith(path);
  };

  // 如果是首页，不显示固定导航栏，让HomePage处理导航
  if (location.pathname === '/') {
    return null;
  }

  return (
    <nav className="main-nav">
      <div className="nav-container">
        <Link to="/" className="nav-logo">
          <Code size={24} />
          <span>Mermaid Editor</span>
        </Link>

        {/* 桌面导航 */}
        <div className="nav-links desktop-nav">
          {navItems.map((item) => {
            const IconComponent = item.icon;
            return (
              <Link
                key={item.path}
                to={item.path}
                className={`nav-link ${isActive(item.path) ? 'active' : ''}`}
              >
                <IconComponent size={18} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </div>


      </div>
    </nav>
  );
};

const App = () => {
  return (
    <Router>
      <div className="app">
        <Navigation />
        <main className={`main-content ${location.pathname === '/' ? 'home-page' : ''}`}>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/editor" element={<MermaidEditor />} />
            <Route path="/docs" element={<DocumentationCenter />} />
            <Route path="/docs/:type" element={<DocumentationCenter />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
};

export default App;
